<!--
 * FilePath     : \src\components\dynamicTable\index.vue
 * Author       : 郭鹏超
 * Date         : 2024-10-29 11:18
 * LastEditors  : 郭鹏超
 * LastEditTime : 2025-01-25 11:17
 * Description  : 表格封装组件
 * CodeIterationRecord: 
 * 参数说明:
 * headerList: 为空时 需要传params 使用统一方法获取
 [
  * {
    * label: "日期"                       表格列名
    * prop: "assessDate"                 列绑定值
    * align: "center"                    内容位置
    * headerAlign: ""                    列名内容位置
    * width: "110"                       列宽度
    * minWidth: false                    列最小列度
    * style: "date"                      列内容种类
    * fixedPosition: ""                  固定位置
    * slotName: ""                       插槽名称
    * level: ""                          列头层级（多级表头使用）
    * parentID: ""                       父级表头ID（多级表头使用）
    * options: [                         下拉框 多选框使用
    *   {key:"",value:""}
    * ]
  * }
 *]
  * 表格列支持类型
    * columnStyle:
    * date      日期选择框
    * time      时间选择框
    * text      文字(支持Html)
    * select    下拉框
    * input     输入框
    * check     多选框
    * slot      插槽 配合slotName使用 用于组件处理不了的逻辑时使用
提供方法：doLayout，直接调用el-table的doLayout方法
-->

<template>
  <div class="wh-full">
    <el-table
      ref="tableRef"
      height="100%"
      width="100%"
      :highlight-current-row="true"
      border
      stripe
      :data="tableData"
      :row-class-name="getRowClassName"
      @row-click="rowClick"
      @current-change="currentChange"
      @select="select"
      @selection-change="selectionChange"
    >
      <template v-for="item in innerHeaderList.filter((item) => item.level === 1)" :key="item.columnID">
        <el-table-column v-if="item.columnAttribute.style == 'selection'" type="selection" width="30" align="center"></el-table-column>
        <recursive-table-column v-else :item="item" :tableData="tableData" :innerHeaderList="innerHeaderList">
          <template v-slot:[item.columnAttribute.slotName]="{ row }">
            <!-- 动态插槽名称 -->
            <slot :name="item.columnAttribute.slotName" v-bind:row="row"></slot>
          </template>
        </recursive-table-column>
      </template>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import recursiveTableColumn from "./recursiveTableColumn.vue";
const { headerList, params, tableData, tableRefName } = defineProps({
  tableData: {
    type: Array as PropType<Record<string, any>[]>,
    default: () => {
      return [];
    }
  },
  headerList: {
    type: Array as PropType<Record<string, any>[]>,
    default: () => {
      return [] as Record<string, any>[];
    }
  },
  params: {
    type: Object as PropType<DynamicTableParams | undefined>,
    default: () => {
      return undefined;
    }
  },
  tableRefName: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["rowClick", "currentChange", "select", "selectionChange"]);
let { fetchRun, fetchs } = dynamicTableSettingService.getDynamicTableHeader;
const dataKey = Object.values(params ?? {}).join("_") ?? "";
const innerHeaderList = computed<Record<string, any>[]>(() => {
  if (headerList.length > 0) {
    return headerList;
  }
  if (dataKey.length == 0) {
    return [];
  }
  fetchRun({ dataKey: dataKey, ...(params ?? {}) });
  return fetchs.value[dataKey]?.data ?? [];
});
/**
 * @description:执行emits方法
 * @param row 行数据
 * @return
 */
const rowClick = (row: any) => {
  emits("rowClick", row);
};
const currentChange = (row: any) => {
  emits("currentChange", row);
};
/**
 * @description: 多选表格勾选事件
 * @param selectRows
 * @param row
 * @return
 */
const select = (selectRows: any[], row: any) => {
  emits("select", selectRows, row);
};
/**
 * @description: 多选表格勾选异动事件
 * @param selectRows
 * @return
 */
const selectionChange = (selectRows: any[]) => {
  emits("selectionChange", selectRows);
};
/**
 * @description: 设置行Class
 * @return
 */
const getRowClassName = ({ rowIndex }: any) => `row-${rowIndex} main-record-row`;
const tableRef = ref<any>();
defineExpose({
  [tableRefName]: tableRef
});
</script>
